<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Leaflet</title>
  <link rel="stylesheet" href="leaflet.css" />
  <script src="leaflet.js"></script>
  <!--叶片状蚂蚁路径-->
  <script src="plugins/leaflet-ant-path.js"></script>
  <!--方向插件-->
  <script src="plugins/leaflet.rotatedMarker.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    #search {
      height: 60px;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: #000000;
      z-index: 10000000;
    }

    #search-btn,
    #stop-btn {
      cursor: pointer;
    }

    #map {
      height: 100vh;
    }
  </style>
</head>

<body>
  <div id="search">
    <input id="search-input" />
    <button id="search-btn">搜索</button>
    <button id="stop-btn">停止</button>
  </div>
  <div id="map"></div>

  <script>
    let map = null;

    function setLocation(id, center, beginLocation, endLocation) {
      if (map) {
        map.remove();
      }

      map = L.map(id).setView(center, 13);

      L.tileLayer(
        "http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7", {
          minZoom: 11,
          maxZoom: 16
          // attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }
      ).addTo(map);

      L.marker(beginLocation, {
        icon: L.icon({
          iconUrl: "./icons/begin.png", // 图标图片的URL
          iconSize: [32, 32], // 图标的大小
          iconAnchor: [15, 15], // 图标的锚点，即图标的位置应该放置在地图上的位置
          popupAnchor: [-3, -76] // 弹出框的锚点，即当你点击图标时，弹出框应该出现在哪个位置
        })
      }).addTo(map);

      L.marker(endLocation, {
        icon: L.icon({
          iconUrl: "./icons/end.png", // 图标图片的URL
          iconSize: [32, 32], // 图标的大小
          iconAnchor: [15, 15], // 图标的锚点，即图标的位置应该放置在地图上的位置
          popupAnchor: [-3, -76] // 弹出框的锚点，即当你点击图标时，弹出框应该出现在哪个位置
        })
      }).addTo(map);
    }

    setLocation(
      "map",
      [28.23, 112.93],
      [28.23 + Math.random() / 20, 112.93 + Math.random() / 20],
      [28.23 + Math.random() / 20, 112.93 + Math.random() / 20]
    );
  </script>
</body>

</html>